<template>
  <div class="table">
    <div v-if="showList">
      <Card :dis-hover="true" class="table-top">
        <div class="table-title">
          <span>{{ $t('myTestTab.tableName') }}</span>
          <div class="table-btn">
            <!-- Button -->
          </div>
        </div>
        <div class="searchGroup" id="searchHeight">
          <Row :gutter="10">
            <Col span="11">
              <Form ref="searchForm" :model="searchForm" :rules="formVerity" inline class="simpleSearch"
                    @keydown.native.enter.prevent="query(searchMore ? 'searchGroupForm': 'searchForm')">
                <!-- FormItem -->
              </Form>
            </Col>
            <Col span="13">
              <Button type="primary" shape="circle" class="m-10" icon="ios-search"
                      @click="query(searchMore ? 'searchGroupForm': 'searchForm')">{{ $t('common.search') }}
              </Button>
              <!-- searchMore Button 可选 -->
            </Col>
          </Row>
          <!-- 高级查询 可选 -->
          <!-- searchMore div 可选 -->
        </div>
      </Card>
      <!-- 表格 -->
      <!--  delete Modal 可选  @on-selection-change="selectChange" -->
      <Table ref="tables"
             :columns="tableHeader"
             :data="tableData"
             :loading="loading"
             :height="tableHeight"
             border
             :class="{searchOpen: searchOpen}">
      </Table>
      <!-- 底部按钮 -->
      <div class="tabelFooter">
        <div class="footerBtn">
          <!-- delete Button 可选  -->
        </div>
        <Page :total="this.total"
              :page-size="this.pSize"
              :current="this.pNum"
              :page-size-opts="[20, 50, 80]"
              size="small"
              show-elevator
              show-total
              show-sizer
              @on-change="changePage(searchMore ? 'searchGroupForm': 'searchForm', $event)"
              @on-page-size-change="changeSize"/>
      </div>
      <!-- 删除确认modal -->
      <!-- delete Modal 可选  -->
    </div>
    <!-- cru model 增查改 可选  -->
  </div>
</template>

<script>
import { getPost, paramsFromJson, fromJson } from '@/libs/ajax.js' // 请求方法统一调用此文件，严禁重新书写或是改写改文件中的方法！
import { formatDate, paramsPackaging } from '@/libs/common.js' // 公共方法统一放入common.js文件中，严禁更换存放路径！
// import * as Verify from '@/libs/verity' // 表单校验规则，统一写入此文件中，严禁更改存放路径！
import '@/assets/style/tableCommon.less' // 表格页公用样式，不休修改与复写！
import './myTestTab.less' // 自定义样式表，有类名冲突时，请另起类名，严禁直接复写组件原有类名的样式！

// 组件引用
// <!-- cru model 增查改 可选  -->

export default {
  name: 'tables_page',
  // <!-- cru model components 增查改 可选  -->
  data () {
    return {
      // 组件状态初始化
      showList: true,
      // <!-- cru model components addModel: false 增查改 可选  -->
      searchMore: false,
      loading: false,
      selectLoading: false,
      // <!-- delete Modal deleteModal: false, 可选  -->
      searchOpen: false,
      // <!-- delete Modal allCheckbox: false, 可选  -->
      // 组件数据初始化
      // <!-- cru model components editData: {}, 增查改 可选  -->

      // 单条件查询表单
      searchForm: {
        key: 'name',
        value: ''
      },
      // 多条件查询表单
      // <!-- searchMore div 可选 -->
      // 表单校验
      formVerity: {},
      // 表格相关初始化
      pSize: 20,
      pNum: 1,
      total: 0,
      tableHeight: 0,
      searchHeight: 0,
      tableHeader: [
        {
          type: 'selection',
          align: 'center',
          fixed: 'left',
          width: 50
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.loginName'))
          },
          key: 'loginName',
          width: 110,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.name'))
          },
          key: 'name',
          width: 90
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.email'))
          },
          key: 'email',
          width: 180,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.mobilePhone'))
          },
          key: 'mobilePhone',
          width: 115
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.address'))
          },
          key: 'address',
          width: 200,
          ellipsis: true, // 过长省略
          tooltip: true // 字符过长tooltip显示全部内容
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.dtStart'))
          },
          key: 'dtStart',
          width: 90,
          align: 'center',
          render: (h, params) => {
            const text = params.row.dtStart === true ? 'true' : 'false'
            const color = params.row.dtStart === true ? '#19be6b' : '#ed4014'
            return h('div', [
              h('span', {
                style: {
                  marginRight: '5px',
                  width: '12px',
                  height: '12px',
                  background: color,
                  borderRadius: '12px',
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }),
              h('strong', {
                style: {
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }, text)
            ])
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.delSign'))
          },
          key: 'delSign',
          width: 90,
          align: 'center',
          render: (h, params) => {
            const text = params.row.delSign === true ? 'true' : 'false'
            const color = params.row.delSign === true ? '#19be6b' : '#ed4014'
            return h('div', [
              h('span', {
                style: {
                  marginRight: '5px',
                  width: '12px',
                  height: '12px',
                  background: color,
                  borderRadius: '12px',
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }),
              h('strong', {
                style: {
                  display: 'inline-block',
                  verticalAlign: 'middle'
                }
              }, text)
            ])
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.remark'))
          },
          key: 'remark',
          width: 140
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.createStamp'))
          },
          key: 'createStamp',
          width: 130,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div',
              formatDate(new Date(params.row.createStamp), 'yyyy-MM-dd')
            )
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.createTxStamp'))
          },
          key: 'createTxStamp',
          width: 150,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            return h('div',
              formatDate(new Date(params.row.createTxStamp), 'yyyy-MM-dd hh:mm')
            )
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.lastupStamp'))
          },
          key: 'lastupStamp',
          width: 130,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            const row = params.row
            const data = row.lastupStamp === undefined ? '' : formatDate(new Date(row.lastupStamp), 'yyyy-MM-dd')
            return h('div', data)
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('myTestTab.lastupTxStamp'))
          },
          key: 'lastupTxStamp',
          width: 150,
          sortable: true,
          align: 'center',
          render: (h, params) => {
            const row = params.row
            const data = row.lastupStamp === undefined ? '' : formatDate(new Date(row.lastupStamp), 'yyyy-MM-dd hh:mm')
            return h('div', data)
          }
        },
        {
          renderHeader: (h, params) => {
            return h('span', this.$t('common.action'))
          },
          width: 200,
          align: 'center',
          fixed: 'right',
          render: (h, params, vm) => {
            return h('div', [
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    // console.log(params.row)
                    this.detailsData = params.row
                    this.showList = false
                    this.detailsModel = true
                  }
                }
              }, this.$t('common.check')),
              h('Button', {
                props: {
                  type: 'primary',
                  size: 'small'
                },
                style: {
                  marginRight: '5px'
                },
                on: {
                  click: () => {
                    this.editData = params.row
                    this.showList = false
                    this.editorModel = true
                  }
                }
              }, this.$t('common.edit')),
              h('Button', {
                props: {
                  type: 'error',
                  size: 'small'
                },
                on: {
                  click: () => {
                    // console.log(params.row.recordId)
                    this.$Modal.confirm({
                      title: '温馨提示',
                      content: '是否确认删除？',
                      okText: '确定',
                      cancelText: '取消',
                      onOk: () => {
                        let postData = []
                        postData = fromJson([params.row.recordId])
                        getPost('/aut/myTestTab/del', postData, (data, all) => {
                          if (all.code === 'E0') {
                            this.refresh()
                            this.$nextTick(() => {
                              this.$Message.success({
                                content: '删除成功！',
                                duration: 3
                              })
                            })
                          }
                        })
                      }
                    })
                  }
                }
              }, this.$t('common.delete'))
            ])
          }
        }
      ],
      tableData: [
        {
          loginName: 'dsf',
          name: '测试',
          email: '1668079770@qq.com',
          mobilePhone: '13000000000',
          address: '四川成都',
          dtStart: true,
          delSign: true,
          remark: '没有想说的',
          createStamp: '2019-3-18',
          createTxStamp: '2019-3-18 10:28:00',
          lastupStamp: '2019-3-18',
          lastupTxStamp: '2019-3-18 10:28:30'
        }
      ],
      // 批量删除信息表格列队
      // <!-- delete Modal showSelcetList 可选  -->
      // 数据暂存，便于调用
      selectIdList: [],
      selectList: [],
      dateStart: '',
      dateEnd: '',
      paramsData: {}
    }
  },
  methods: {
    // 选择单查询条件时
    selcetChange (value) {
      this.$refs.searchForm.resetFields() // 单列查询条件切换时清空已键入值
      this.searchForm.key = value // 切换对应搜索键入框
      this.searchForm.value = '' // 切换后对进行输入框初始化，避免日期选择条件后属性的类型变为数组问题
      if (this.searchForm.key !== 'mobilePhone') { // 不是手机号搜索条件时，清空校验规则，防止提交表单时校验进行拦截无法提交问题
        this.formVerity = {}
      }
    },
    // <!-- cru model  add () 增查改 可选  -->

    // 判断当前子组件名称对应显示
    // <!-- cru model  modelReturnFun () 增查改 可选  -->

    // 设置每页显示条数
    changeSize (size) {
      this.pSize = size
      this.refresh() // 设置后进行表格数据刷新
    },
    // 展开收起高级搜索区域
    // <!-- searchMore searchCollapse 可选 -->

    // <!-- delete Modal handleSelectAll selectChange  batchDelete 可选  -->

    // 请求表格数据
    postQuery (psize, pnum, paramsData) { // 接收查询所需参数
      let postData = []
      postData = paramsFromJson(psize, pnum, paramsData) // 参数包格式化
      // console.log(postData)
      this.loading = true
      getPost('/aut/myTestTab/findList', postData, (data, all) => {
        // console.log(data.list) //成功获取数据
        this.pSize = data.psize
        this.pNum = data.pnum
        this.total = data.total
        this.tableData = data.list
        this.loading = false
      })
    },
    // 刷新时
    refresh () {
      this.loading = true
      this.postQuery(this.pSize, 1) // 初始化查询
      if (!this.searchMore) { // 清空单列查询
        this.$refs.searchForm.resetFields()
      } else { // 清空高级查询
        this.$refs.searchGroupForm.resetFields()
      }
      this.$nextTick(() => {
        this.loading = false
      })
    },
    // 点击分页时
    changePage (formName, pnum) { // 获取当前表单是单列还是高级及点击的当前页码
      this.pNum = pnum
      this.params(formName) // 根据不同表单进行参数打包
      this.postQuery(this.pSize, this.pNum, this.paramsData) // 调用post方法并传入参数包
    },
    // 点击 搜索 操作时
    query (formName) { // 获取当前表单是单列还是高级
      this.params(formName) // 执行
      // 不同条件传参
      if (this.paramsData === undefined) { // 参数不存在时，初始化psize,pnum查询
        this.pNum = 1
        this.postQuery(this.pSize, this.pNum)
      } else if (!this.searchMore) { // 单列查询时（两种情况）
        if (this.paramsData === undefined) { // 处理1、参数不存在时
          this.pNum = 1
          this.postQuery(this.pSize, this.pNum)
        } else { // 参数存在并传参
          this.postQuery(this.pSize, 1, this.paramsData)
        }
      } else { // 高级查询时，参数存在并传参
        this.postQuery(this.pSize, 1, this.paramsData)
      }
    },
    // 参数打包
    params (formName) {
      // 根据传入的formName 得到不同表单进行校验
      this.$refs[formName].validate((valid) => {
        if (valid) { // 校验通过
          this.paramsData = paramsPackaging(this.searchMore, this.searchForm, this.searchGroupForm, this.dateStart, this.dateEnd)
        }
      })
    },
    setTableHeight () { // 计算table及查询栏高度
      setTimeout(() => {
        this.searchHeight = document.getElementById('searchHeight').offsetHeight
        // this.tableHeight = window.innerHeight - 248 - this.searchHeight // 整合时高度数值需加104
        this.tableHeight = window.innerHeight - 144 - this.searchHeight
      }, 100)
    }
  },
  watch: {
    isFullScreen () { // 监听全屏时table高度变化
      this.setTableHeight()
    }
    // <!-- searchMore searchMore 可选 -->
  },
  computed: {
    isFullScreen () { // 获取当前是否全屏
      return this.$store.state.app.isFullScreen
    }
  },
  mounted () {
    this.setTableHeight() // 初始化调用计算高度
    // this.postQuerySelect() // 请求下拉数据
    // this.postQuery(this.pSize, this.pNum) // 初始化查询数据
  }
}
</script>
